<template>
  <div class="login-wrapper">
    <div class="contant">
      <div class="img-wrapper">
        <img class="img" src="@/assets/logo-1.png">
      </div>
      <a-form id="formLogin" class="user-layout-login" ref="formLogin" :model="form" @finish="handleSubmit">
        <div>
          <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input v-model:value="form.username" class="input" size="large" type="text" placeholder="用户名">
              <img slot="prefix" src="@/assets/user.png" alt="">
            </a-input>
          </a-form-item>
          <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model:value="form.password" class="input" size="large" placeholder="密码">
              <img slot="prefix" src="@/assets/lock.png" alt="">
            </a-input-password>
          </a-form-item>
        </div>
        <a-form-item>
          <div class="btn-wrapper">
            <a-button type="primary" html-type="submit" class="login-button" :loading="form.loginBtn"
              :disabled="form.loginBtn">
              登录
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import api from '@/api/index.js';
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';

const router = useRouter();

const form = ref({});

const handleSubmit = () => {
  api.login.loginSubmit(form.value).then(res => {
    message.success('登录成功');
    localStorage.setItem('token', res.token);
    router.push('/userAdmin');
  }).catch(() => {
    message.error('用户名或密码错误');
  });
}
</script>

<style lang="less" scoped>
.login-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: url('@/assets/background.png') no-repeat center;

  .img-wrapper {
    width: 100%;
    width: 142px;
    margin: 0 auto;
    padding: 42px 0 45px 0;

    .img {
      width: 142px;
    }
  }

  .contant {
    width: 370px;
    height: 430px;
    margin-bottom: 25px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 11px 24px 0px rgba(18, 21, 40, 0.58);
  }

  .input {
    height: 60px;
    font-size: 16px;
  }
}

.user-layout-login {
  padding: 0 21px;

  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    min-width: 70px;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  .btn-wrapper {
    width: 100%;
    margin-top: 25px;
    display: flex;
    justify-content: center;
  }

  .confirm-wrapper {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 20px;
    width: 100%;
    height: 60px;
    font-weight: 500;
  }
}
</style>